<template>
  <task-container @menuItemClick="onMenuItemClick" @selectItemClick="onSelectItem" @setQuery="onSetQuery">
    <div class="c-box">
      <div class="personal-details">
        <div class="icon">
          <img src="~@/assets/ico/u18916.png" height="90" alt="" />
        </div>
        <div class="info">
          <div style="margin-bottom: 10px;">姓名：{{ infoObj.userName }}</div>
          <div class="info-flex">
            <div>手机：{{ infoObj.phoneNumber }}</div>
            <div>运营商：{{ infoObj.operatorName }}</div>
            <div>
              归属地：{{
                Object.keys(infoObj).length > 0 && infoObj.provName && infoObj.cityName
                  ? infoObj.provName + infoObj.cityName
                  : infoObj.provName && !infoObj.cityName
                  ? infoObj.provName
                  : !infoObj.provName && infoObj.cityName
                  ? infoObj.cityName
                  : null
              }}
            </div>
          </div>
        </div>
      </div>
      <!-- 重点人 -->
      <a-tabs default-active-key="1" @change="handleChange" v-model="tabIndex" v-if="tenantid == 3">
        <a-tab-pane key="1" tab="虚拟身份">
          <custom-table
            ref="table"
            rowKey="id"
            :showColSettings="false"
            :hideColSettings="['action']"
            :showAlert="false"
            :showSelection="false"
            :loading="loading1"
            :columns="columns1"
            :dataSource="pageData1"
            @change="onTableChange1"
          >
          </custom-table>
        </a-tab-pane>
        <a-tab-pane key="4" tab="通联记录">
          <custom-table
            ref="table"
            rowKey="id"
            size="middle"
            :showAlert="false"
            :showSelection="false"
            :loading="loading_tl"
            :columns="columns_tl"
            :dataSource="pageData_tl"
            @change="onTableChange_tl"
          />
        </a-tab-pane>
        <a-tab-pane key="5" tab="通联关系图">
          <relation-echart ref="relationRef" :phone="pageFilter_tl.phone" />
        </a-tab-pane>
        <a-tab-pane key="2" tab="职住区域" force-render>
          <div style="height:500px;position: relative;">
            <a-radio-group
              default-value="1"
              @change="onPosition"
              style="position: absolute;left:10px; top:10px;z-index: 1;"
            >
              <a-radio-button value="1"> 居住地 </a-radio-button>
              <a-radio-button value="2"> 工作地 </a-radio-button>
            </a-radio-group>
            <div class="handle leftHandle" v-show="isHandleShow" @click="clickLeft">
              <a-icon class="close-icon" type="right" title="展开" />
            </div>
            <div class="closeTable" v-show="isCloseShow" @click="onCloseTable">X</div>
            <custom-table
              v-if="isTableShow"
              ref="table"
              rowKey="id"
              :showColSettings="false"
              :hideColSettings="['action']"
              :showAlert="false"
              :showSelection="false"
              :loading="loading2"
              :columns="columns2"
              :dataSource="pageData2"
              v-show="visible"
              @change="onTableChange2"
              :scroll="{ y: 320 }"
              style="position: absolute;left:10px; top:50px;z-index: 1;background-color: #fff;width:320px;"
            >
              <template slot="placeName" slot-scope="text, record">
                <a @click="onLocal(record)" :title="text">{{ text.substring(0, 5) + '...' }}</a>
              </template>
            </custom-table>
            <map-draw v-if="reloading" ref="mapDrawId" />
          </div>
        </a-tab-pane>
        <a-tab-pane key="3" tab="三码互查">
          <custom-table
            ref="table"
            rowKey="id"
            :showColSettings="false"
            :hideColSettings="['action']"
            :showAlert="false"
            :showSelection="false"
            :loading="loading3"
            :columns="columns3"
            :dataSource="pageData3"
            @change="onTableChange3"
          >
            <template slot="type" slot-scope="text">
              <span v-if="text == '3'">IMEI</span>
              <span v-if="text == '2'">IMSI</span>
            </template>
            <template slot="action" slot-scope="text, record">
              <a-button @click="handleDetails(record)" type="link" style="padding:0;">查询</a-button>
            </template>
          </custom-table>
        </a-tab-pane>
      </a-tabs>
      <!-- 反走私 -->
      <a-tabs default-active-key="1" @change="handleChange" v-model="tabIndex" v-else>
        <a-tab-pane key="1" tab="虚拟身份">
          <custom-table
            ref="table"
            rowKey="id"
            :showColSettings="false"
            :hideColSettings="['action']"
            :showAlert="false"
            :showSelection="false"
            :loading="loading1"
            :columns="columns1"
            :dataSource="pageData1"
            @change="onTableChange1"
          >
          </custom-table>
        </a-tab-pane>
        <a-tab-pane key="2" tab="职住区域" force-render>
          <div style="height:500px;position: relative;">
            <a-radio-group
              default-value="1"
              @change="onPosition"
              style="position: absolute;left:10px; top:10px;z-index: 1;"
            >
              <a-radio-button value="1"> 居住地 </a-radio-button>
              <a-radio-button value="2"> 工作地 </a-radio-button>
            </a-radio-group>
            <div class="handle leftHandle" v-show="isHandleShow" @click="clickLeft">
              <a-icon class="close-icon" type="right" title="展开" />
            </div>
            <div class="closeTable" v-show="isCloseShow" @click="onCloseTable">X</div>
            <custom-table
              v-if="isTableShow"
              ref="table"
              rowKey="id"
              :showColSettings="false"
              :hideColSettings="['action']"
              :showAlert="false"
              :showSelection="false"
              :loading="loading2"
              :columns="columns2"
              :dataSource="pageData2"
              v-show="visible"
              @change="onTableChange2"
              :scroll="{ y: 320 }"
              style="position: absolute;left:10px; top:50px;z-index: 1;background-color: #fff;width:320px;"
            >
              <template slot="placeName" slot-scope="text, record">
                <a @click="onLocal(record)" :title="text">{{ text.substring(0, 5) + '...' }}</a>
              </template>
            </custom-table>
            <map-draw v-if="reloading" ref="mapDrawId" />
          </div>
        </a-tab-pane>
        <a-tab-pane key="3" tab="三码互查">
          <custom-table
            ref="table"
            rowKey="id"
            :showColSettings="false"
            :hideColSettings="['action']"
            :showAlert="false"
            :showSelection="false"
            :loading="loading3"
            :columns="columns3"
            :dataSource="pageData3"
            @change="onTableChange3"
          >
            <template slot="type" slot-scope="text">
              <span v-if="text == '3'">IMEI</span>
              <span v-if="text == '2'">IMSI</span>
            </template>
            <template slot="action" slot-scope="text, record">
              <a-button @click="handleDetails(record)" type="link" style="padding:0;">查询</a-button>
            </template>
          </custom-table>
        </a-tab-pane>
      </a-tabs>
      <a-button
        style="position: absolute;top: 105px;right: 20px;"
        :loading="btnLoading"
        @click="onUpdate"
        v-if="isOperation"
      >
        更新数据
      </a-button>
    </div>
    <InfoModal ref="infoModalId" />
  </task-container>
</template>
<script>
import taskContainer from '../modules/taskContainer'
import CustomTable from '@/components/zxd/Table/CustomTable'
import mapDraw from '../../modules/mapDraw'
import relationEchart from '../modules/relationEchart'
import InfoModal from './infoModal'
import * as api from '@/api/wxSmuggle/eventModel.js'
import Vue from 'vue'
import { TENANT_ID } from '@/store/mutation-types'
export default {
  components: {
    taskContainer,
    CustomTable,
    mapDraw,
    InfoModal,
    relationEchart
  },
  data() {
    return {
      idDisabled: true,
      loading1: false,
      loading2: false,
      loading3: false,
      selectItem: {},
      columns1: [
        {
          title: '序号',
          dataIndex: 'order',
          scopedSlots: { customRender: 'order' },
          align: 'center',
          width: 60,
          customRender: (text, record, index) =>
            `${(this.pageFilter1.pageNo - 1) * this.pageFilter1.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '虚拟身份类型',
          align: 'center',
          dataIndex: 'type'
        },
        {
          title: '账号ID',
          align: 'center',
          dataIndex: 'account'
        },
        {
          title: '更新时间',
          dataIndex: 'updateTime',
          align: 'center'
        }
      ],
      pageData1: {},
      pageFilter1: {
        pageNo: 1,
        pageSize: 10
      },
      columns2: [
        {
          title: '排行',
          dataIndex: 'rankNum',
          width: 60,
          align: 'center'
        },
        {
          title: '停留总时间',
          dataIndex: 'duration',
          width: 110,
          align: 'center'
        },
        {
          title: '位置描述',
          dataIndex: 'placeName',
          width: 100,
          align: 'center',
          scopedSlots: { customRender: 'placeName' }
          // customRender: (t) => (<j-ellipsis value={t} length={5}/>)
        }
      ],
      pageData2: {},
      pageFilter2: {
        pageNo: 1,
        pageSize: 10,
        type: 1 //默认居住地
      },
      columns3: [
        {
          title: '序号',
          dataIndex: 'order',
          scopedSlots: { customRender: 'order' },
          align: 'center',
          width: 60,
          customRender: (text, record, index) =>
            `${(this.pageFilter3.pageNo - 1) * this.pageFilter3.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '类型',
          dataIndex: 'type',
          align: 'center',
          scopedSlots: { customRender: 'type' }
        },
        {
          title: '账号',
          dataIndex: 'number',
          align: 'center'
        },
        {
          title: '更新时间',
          dataIndex: 'updateTime',
          align: 'center'
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: 80,
          scopedSlots: { customRender: 'action' }
        }
      ],
      pageData3: {},
      pageFilter3: {
        pageNo: 1,
        pageSize: 10
      },
      reloading: true,
      tabIndex: '1',
      infoObj: {},
      visible: true,
      tenantid: '',
      // 通联关系
      loading_tl: false,
      columns_tl: [
        {
          title: '序号',
          width: 60,
          align: 'center',
          dataIndex: 'order',
          customRender: (text, record, index) =>
            `${(this.pageFilter_tl.pageNo - 1) * this.pageFilter_tl.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '对端号码',
          dataIndex: 'connectPhone',
          width: 80
        },
        {
          title: '类型',
          dataIndex: 'type',
          width: 80
        },
        {
          title: '通话时间',
          dataIndex: 'contactTime',
          width: 140
        },
        {
          title: '通话时长',
          dataIndex: 'callTime',
          width: 100
        }
      ],
      pageFilter_tl: {
        pageNo: 1,
        pageSize: 10
      },
      pageData_tl: {},
      isOperation: true,
      btnLoading: false,
      isTableShow: true,
      isCloseShow: true,
      isHandleShow: false,
      updateParam: {}
    }
  },
  mounted() {
    this.tenantid = Vue.ls.get(TENANT_ID)
  },
  methods: {
    // 点击左边任务
    onMenuItemClick(id) {
      // console.log(id)
      // this.pageFilter1.id = id
      // this.pageFilter2.id = id
      // this.pageFilter3.id = id
    },
    // 点击目标人员
    onSelectItem(item) {
      console.log(item)
      this.tabIndex = '1'
      this.selectItem = item
      this.getInfo(item.phoneNumber)
      this.pageFilter1.phone = item.phoneNumber
      this.pageFilter2.phone = item.phoneNumber
      this.pageFilter3.phone = item.phoneNumber
      this.pageFilter1.taskId = this.$route.query.taskId
      this.pageFilter2.taskId = this.$route.query.taskId
      this.pageFilter3.taskId = this.$route.query.taskId
      //重点人
      if (this.tenantid == 3) {
        this.pageFilter_tl.phone = item.phoneNumber
        this.pageFilter_tl.taskId = this.$route.query.taskId
      }
      this.refreshTable1()
    },
    onSetQuery(query) {
      this.updateParam = {
        taskId: query.taskId,
        approvalId: query.approvalId
      }
      // this.pageFilter1.taskId = query.taskId
      // this.pageFilter2.taskId = query.taskId
      // this.pageFilter3.taskId = query.taskId
      // this.pageFilter1.approvalId = query.approvalId
      // this.pageFilter2.approvalId = query.approvalId
      // this.pageFilter3.approvalId = query.approvalId
      let str = query.isOperation.toString()
      if (str == 'true') {
        this.isOperation = true //发起人
      } else {
        this.isOperation = false //审批人
      }
    },
    handleChange(val) {
      // console.log(val)
      this.tabIndex = val
      if (val == 1) this.refreshTable1()
      if (val == 2) this.refreshTable2()
      if (val == 3) this.refreshTable3()
      if (val == 4) this.refreshTable_tl()
    },
    getInfo(phoneNumber) {
      api
        .getPhoneInfo({ phone: phoneNumber })
        .then(res => {
          if (res.success) {
            let result = res.result ? res.result : {}
            this.infoObj = Object.assign({}, this.selectItem, result)
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    refreshTable1() {
      this.loading1 = true
      api
        .getVirtualIdentityPage(this.pageFilter1)
        .then(res => {
          if (res.success) {
            this.pageData1 = res.result
            this.loading1 = false
            this.idDisabled = false
          } else {
            this.$message.warning(res.message)
            this.loading1 = false
          }
        })
        .catch(e => {
          this.loading1 = false
          this.$message.warn('请求失败！')
        })
    },
    refreshTable2() {
      this.loading2 = true
      api
        .getActiveAreaInfoPage(this.pageFilter2)
        .then(res => {
          if (res.success) {
            this.pageData2 = res.result
            this.loading2 = false
            this.idDisabled = false
            // this.$refs.table.onClearRowKeys()
            this.$refs.mapDrawId.removeOverlay()
          } else {
            this.$message.warning(res.message)
            this.loading2 = false
          }
        })
        .catch(e => {
          this.loading2 = false
          this.$message.warn('请求失败！')
        })
    },
    refreshTable3() {
      this.loading3 = true
      api
        .getThreeCodePage(this.pageFilter3)
        .then(res => {
          if (res.success) {
            this.pageData3 = res.result
            this.loading3 = false
            this.idDisabled = false
            // this.$refs.table.onClearRowKeys()
          } else {
            this.$message.warning(res.message)
            this.loading3 = false
          }
        })
        .catch(e => {
          this.loading3 = false
          this.$message.warn('请求失败！')
        })
    },
    refreshTable_tl() {
      this.loading_tl = true
      api
        .getContactRecordPage(this.pageFilter_tl)
        .then(res => {
          if (res.success) {
            this.pageData_tl = res.result
            this.loading_tl = false
            this.idDisabled = false
            // this.$refs.table.onClearRowKeys()
          } else {
            this.$message.warning(res.message)
            this.loading_tl = false
          }
        })
        .catch(e => {
          this.loading_tl = false
          this.$message.warn('请求失败！')
        })
    },
    onTableChange1(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter1 = Object.assign({}, this.pageFilter1, paginations)
      this.refreshTable1()
    },
    onTableChange2(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter2 = Object.assign({}, this.pageFilter2, paginations)
      this.refreshTable2()
    },
    onTableChange3(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter3 = Object.assign({}, this.pageFilter3, paginations)
      this.refreshTable3()
    },
    onTableChange_tl(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter_tl = Object.assign({}, this.pageFilter_tl, paginations)
      this.refreshTable_tl()
    },
    handleDetails(record) {
      let str = record.type == 3 ? 'IMEI' : 'IMSI'
      this.$refs.infoModalId.show(str + '：' + record.number, record.phoneList)
    },
    onPosition(val) {
      console.log(val.target.value)
      if (val.target.value == 1) {
        //居住地
        this.pageFilter2.type = 1
      } else {
        //工作地
        this.pageFilter2.type = 2
      }
      this.refreshTable2()
    },
    update1() {
      let param = Object.assign(this.updateParam, { phone: this.pageFilter1.phone })
      api
        .updateVirutalIdentity(param)
        .then(res => {
          if (res.success) {
            this.$message.success('更新成功！')
            this.refreshTable1()
          } else {
            this.$message.error('更新失败！')
          }
          this.btnLoading = false
        })
        .catch(e => {
          this.btnLoading = false
          this.$message.error('更新失败！')
        })
    },
    update2() {
      let param = Object.assign(this.updateParam, { phone: this.pageFilter2.phone, type: this.pageFilter2.type })
      api
        .updateActiveAreaInfo(param)
        .then(res => {
          if (res.success) {
            this.$message.success('更新成功！')
            this.refreshTable2()
          } else {
            this.$message.error('更新失败！')
          }
          this.btnLoading = false
        })
        .catch(e => {
          this.btnLoading = false
          this.$message.error('更新失败！')
        })
    },
    update3() {
      let param = Object.assign(this.updateParam, { phone: this.pageFilter3.phone })
      api
        .updateThreeCode(param)
        .then(res => {
          if (res.success) {
            this.$message.success('更新成功！')
            this.refreshTable3()
          } else {
            this.$message.error('更新失败！')
          }
          this.btnLoading = false
        })
        .catch(e => {
          this.btnLoading = false
          this.$message.error('更新失败！')
        })
    },
    update_tl() {
      let param = Object.assign(this.updateParam, { msisdn: this.pageFilter_tl.phone })
      api
        .updateContactRecord(param)
        .then(res => {
          if (res.success) {
            this.$message.warning('更新成功！')
            this.refreshTable_tl()
          } else {
            this.$message.warn('更新失败！')
          }
          this.btnLoading = false
        })
        .catch(e => {
          this.btnLoading = false
          this.$message.warn('更新失败！')
        })
    },
    update_gx() {
      let param = Object.assign(this.updateParam, { msisdn: this.pageFilter_tl.phone })
      api
        .updateContactRelation(param)
        .then(res => {
          if (res.success) {
            this.$nextTick(() => {
              this.$message.warning('更新成功！')
              this.$refs.relationRef.getList()
            })
          } else {
            this.$message.warn('更新失败！')
          }
          this.btnLoading = false
        })
        .catch(e => {
          this.btnLoading = false
          this.$message.warn('更新失败！')
        })
    },
    onUpdate() {
      this.btnLoading = true
      if (this.tabIndex == 1) {
        this.update1()
      }
      if (this.tabIndex == 2) {
        this.update2()
      }
      if (this.tabIndex == 3) {
        this.update3()
      }
      if (this.tabIndex == 4) {
        this.update_tl()
      }
      if (this.tabIndex == 5) {
        this.update_gx()
      }
    },
    clickLeft() {
      // if (this.isDetailClose) {
      //   this.isTableShow = true
      // } else {
      this.isTableShow = true
      this.isCloseShow = true
      this.isHandleShow = false
      // }
    },
    onCloseTable() {
      this.isCloseShow = false
      this.isTableShow = false
      this.isHandleShow = true
    },
    onLocal(record) {
      // console.log('record')
      // console.log(record.lat, record.lng)
      let arr1 = []
      // let str1 = ''
      // let str2 = ''
      // if (record.placeName.length > 10) {
      //   str1 = record.placeName.substring(0, 10)
      //   str2 = record.placeName.substring(10, record.placeName.length)
      // }
      arr1.push({
        key: 0,
        // position: str1 + '\r\n' + str2,
        position: record.placeName,
        longitude: record.lng,
        latitude: record.lat
      })
      // console.log(arr1)
      let arr = [
        {
          list: arr1
        }
      ]
      // 绘制轨迹
      this.$refs.mapDrawId.drawTaskDetailsDrawer(arr)
    },
    /** 重新加载组件 */
    reload() {
      this.reloading = false
      this.$nextTick(() => (this.reloading = true))
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.menuBox {
  height: auto;
}
.personal-details {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
  .icon {
    flex: 1;
    .anticon {
      font-size: 80px;
    }
  }
  .info {
    flex: 4;
    .info-flex {
      display: flex;
      justify-content: space-between;
      > * {
        flex: 1;
      }
    }
  }
}
.closeTable {
  position: absolute;
  left: 313px;
  top: 54px;
  z-index: 100;
  cursor: pointer;
}
.handle {
  position: absolute;
  display: inline-block;
  top: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.6);
  height: 100%;
  cursor: pointer;
  transition: 0.5s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .close-icon {
    font-size: 20px;
    color: #fff;
  }
  &.leftHandle {
    left: 0;
  }
  &.rightHandle {
    right: 0;
  }
}
</style>
